<template>
  <page-body>
    <view class="page">
      <view class="flex align-stretch benben-position-layout flex myNews_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex align-center justify-between flex-sub myNews_fd0_0'>
          <view class='flex align-center myNews_fd0_0_c0'>
          </view>
          <view class='flex align-center'>
            <text class='myNews_fd0_0_c1_c0'>我的消息</text>
          </view>
          <view class='flex align-center myNews_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
        <view class='flex flex-direction align-stretch'>
          <template v-for='(item,key0) in dataList'>
            <view class='flex flex-wrap align-start myNews_fd1_0_c0' @tap.stop="goListFunc(item.msg_type)" :key='key0'>
              <view class='flex flex-wrap align-center myNews_fd1_0_c0_c0'>
                <image class='myNews_fd1_0_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"17.png"'></image>

                <benben-message-num class='myNews_fd1_0_c0_c0_c1' :message-num="item.num" size='20' color='#fff'
                  background-color='red'>
                </benben-message-num>
              </view>
              <view class='flex flex-direction flex-wrap align-stretch flex-sub myNews_fd1_0_c0_c1'>
                <view class='flex flex-wrap align-center myNews_fd1_0_c0_c1_c0'>
                  <text class='flex-sub myNews_fd1_0_c0_c1_c0_c0'>{{item.name}}</text>
                  <text class='myNews_fd1_0_c0_c1_c0_c1'>{{item.new_time}}</text>
                </view>
                <text class='myNews_fd1_0_c0_c1_c1'>{{item.new_msg}}</text>
              </view>
            </view>
          </template>

        </view>
        <!-- <view class='flex flex-wrap align-center myNews_fd1_1'>
        </view> -->
        <view class='flex flex-direction align-stretch'>
          <template v-for='(item,key0) in chatList'>
            <view class='flex flex-wrap align-start myNews_fd1_2_c0' @tap.stop="gochat(item)" :key='key0'>
              <view class='flex flex-wrap align-center myNews_fd1_0_c0_c0'>
                <image class='myNews_fd1_0_c0_c0_c0' mode="aspectFit" :src='item.userProfile.avatar'></image>
                <benben-message-num class='myNews_fd1_0_c0_c0_c1' :message-num="item.unreadCount" size='20' color='#fff'
                  background-color='red'>
                </benben-message-num>
              </view>
              <view class='flex flex-direction flex-wrap align-stretch flex-sub myNews_fd1_0_c0_c1'>
                <view class='flex flex-wrap align-center myNews_fd1_0_c0_c1_c0'>
                  <text class='flex-sub myNews_fd1_0_c0_c1_c0_c0'>{{item.userProfile.nick}}</text>
                  <text
                    class='myNews_fd1_0_c0_c1_c0_c1'>{{$util.timeFormat(item.lastMessage.lastTime,'mm-dd h:M')}}</text>
                </view>
                <text class='myNews_fd1_0_c0_c1_c1'>{{item.lastMessage.messageForShow}}</text>
              </view>
            </view>
          </template>

        </view>
      </view>




    </view>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  // 11111111111111111111
  import {
    TUILogin
  } from "@tencentcloud/tui-core";
  import {
    SYSTEM_CONFIG,
    SDKAppID,
    secretKey
  } from "@/common/config.js";
  import {
    TUIChatKit,
    genTestUserSig
  } from "@/TUIKit";
  import {
    vueVersion
  } from "@/TUIKit/adapter-vue";
  // 22222222222222222222222222
  import {
    TUIConversationService
  } from '@tencentcloud/chat-uikit-engine';
  export default {
    components: {},


    data() {
      return {
        "dataList": [],
        "chatList": [],
        "chatMessage": {
          "chat_url": ""
        }
      };
    },
    computed: {
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      },
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set() {
          this.$store.commit('updateUserInfo', value)
        },
      }
    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      if (this.isLogin) {
        const userID = this.userInfo ? this.userInfo.id.toString() : '';
        let config = {
          userID: userID, //User ID
          SDKAppID: SDKAppID, // Your SDKAppID
          secretKey: secretKey, // Your secretKey
        }
        const userSig = genTestUserSig(config).userSig;
        TUILogin.login({
          SDKAppID: config.SDKAppID,
          userID: config.userID,
          userSig: userSig,
          // 如果您需要发送图片、语音、视频、文件等富媒体消息，请设置为 true
          useUploadPlugin: true,
          useProfanityFilterPlugin: false,
          framework: `vue${vueVersion}` // 当前开发使用框架 vue2 / vue3
        }).then(() => {
          let nums = uni.$TIM.getTotalUnreadMessageCount();
          if (nums) {
            uni.setTabBarBadge({
              index: 2,
              text: nums.toString()
            })
          }

        })
      } else {
        uni.removeTabBarBadge({
          index: 2
        })
      }
      this.getMessageListFunc()
      this.getChatFunc()
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {
      this.getMessageListFunc()
      this.getChatFunc()
    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      // 聊天
      gochat(item) {
        console.log('iii', item)
        TUIConversationService.switchConversation(`C2C${item.userProfile.userID}`)
        uni.navigateTo({
          url: "/TUIKit/components/TUIChat/index"
        })
      },
      getChatFunc() {
        let that = this
        if (uni.$TIM.isReady()) {
          clearInterval(this.timer)
          let promise = uni.$TIM.getConversationList();
          promise.then(function(imResponse) {
            console.log(imResponse.data.conversationList, 27);
            that.chatList = imResponse.data.conversationList

            let userIDList = []
            that.chatList.map((item, index) => {
              userIDList.push(item.userProfile.userID)
              let promise = uni.$TIM.getUserProfile({
                userIDList // 请注意：即使只拉取一个用户的资料，也需要用数组类型，例如：userIDList: ['user1']
              });
              promise.then(function(imResponse) {

                that.chatList[index].userProfile.birthday = imResponse.data[index]
                  .birthday
                that.chatList[index].userProfile.gender = imResponse.data[index]
                  .gender

                console.log(imResponse.data, 191, that
                  .chatList); // 存储用户资料的数组 - [Profile]
              }).catch(function(imError) {
                console.warn('getUserProfile error:', imError); // 获取其他用户资料失败的相关信息
              });
            })
            console.log('listinlistinfolistinfolistinfofo', that.chatList)
            // const conversationList = imResponse.data.conversationList; // 全量的会话列表，用该列表覆盖原有的会话列表
            // const isSyncCompleted = imResponse.data.isSyncCompleted; // 从云端同步会话列表是否完成
          }).catch(function(imError) {
            console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
          });
        }

      },
      // enddddddddddd
      //跳转页面
      goListFunc(type) {
        this.$urouter.navigateTo(`/pages/grzx/platformAnnouncement/platformAnnouncement`);
        return;
        if (type == '2') {
          this.$urouter.navigateTo(`/pages/grzx/platformAnnouncement/platformAnnouncement`);
        } else if (type == '3') {
          this.$urouter.navigateTo(`/pages/grzx/platformAnnouncement/platformAnnouncement`);
        }
      },
      //获取客服链接
      async getChatMessageFunc(store_id) {
        //请求方法
        //数据验证

        let datachatMessage = await this.$api.get(global.apiUrls.post64897f6fd5486, {
          store_id: store_id
        });

        if (datachatMessage.data.code != 1) {
          this.$message.info(datachatMessage.data.msg);
          return
        }
        let infochatMessage = datachatMessage.data;
        this.chatMessage = infochatMessage.data

        this.dynamicJump(this.chatMessage.chat_url);
      },
      //系统消息-获取消息类型+最新消息
      async getMessageListFunc() {
        //请求方法
        //数据验证

        let datadataList = await this.$api.get(global.apiUrls.post6424235abdc3c, {

        });

        if (datadataList.data.code != 1) {
          this.$message.info(datadataList.data.msg);
          return
        }
        let infodataList = datadataList.data;
        this.dataList = infodataList.data

      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #fff;
    background-size: 100% auto;
  }

  .myNews_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .myNews_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
  }

  .myNews_fd0_0_c0 {
    width: 180rpx;
  }

  .myNews_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
  }

  .myNews_fd1_2_c0 {
    margin: 32rpx 032rpx 0rpx 32rpx;
  }

  .myNews_fd1_1 {
    background: #F8F8F8;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    width: 750rpx;
    height: 20rpx;
  }

  .myNews_fd1_0_c0_c1_c1 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .myNews_fd1_0_c0_c1_c0_c1 {
    line-height: 28rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .myNews_fd1_0_c0_c1_c0_c0 {
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .myNews_fd1_0_c0_c1_c0 {
    margin: 0rpx 0rpx 17rpx 0rpx;
  }

  .myNews_fd1_0_c0_c1 {
    // border-bottom: 1px solid rgba(238, 238, 238, 1);
    margin: 0rpx 0rpx 0rpx 24rpx;
    padding: 0rpx 0rpx 32rpx 0rpx;
  }

  .myNews_fd1_0_c0_c0_c1 {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
  }

  .myNews_fd1_0_c0_c0_c0 {
    width: 90rpx;
    height: 90rpx;
    border-radius: 45rpx 45rpx 45rpx 45rpx;
  }

  .myNews_fd1_0_c0_c0 {
    position: relative;
  }

  .myNews_fd1_0_c0 {
    margin: 32rpx 32rpx 0rpx 32rpx;
  }
</style>
